{extend name="$admin_layout" /}

{block name="style"}
<link href="__PLUG__/jquery-nestable/jquery.nestable.css" rel="stylesheet" type="text/css" />
<!-- 引入饿了么css -->
<link rel="stylesheet" href="/static/plugins/element-ui/element-ui.css">
{/block}

{block name="content"}
<style>
	.classfiy-name {
		width: 100% !important;
		outline: none !important;
	}
	.classfiy-sort {
		width: 100% !important;
		outline: none !important;
	}
	.clssfiy-pic {
		width: 30px;
		height: 30px;
	}
	.operation {
		color: #5a99f1;
		cursor: pointer;
	}
	.cell {
		display: flex !important;
		align-items: center !important;
	}
	#classfiy {
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	}

	/* 图片上传 */
	.avatar-uploader .el-upload {
		width: 50px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader{
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
	}
	.avatar {
		width: 50px;
		height: 45px;
		display: block;
	}
	.el-upload__input {
		display: none !important;
	}
	.up-pic {
		color: #5a99f1;
	}
	/deep/ .el-table .cell{
			   padding-left: 10px !important;
			   padding-right: 10px !important;
		   }
	/* header头部 */
	.header {
		display: flex;
		flex-wrap: nowrap;
		padding: 10px;
		width: 620px;
	}
	.search-frame {
		display: flex;
		flex-wrap: nowrap;
		width: 50%;
		padding-left: 20px;
	}

	.title-btn {
		height: 30px;
	}
</style>

<div class="row">
	<div class="col-md-12">
		<div class="box nav-tabs-custom" id="classfiy">
			<div class="header">
				<a class="btn btn-sm mr5 btn-primary title-btn" type="primary" @click="addClassfiy" plain><i class="fa fa-plus pr5"></i>{:lang('新增分类')}</a>
				<div class="search-frame">
					<input
							class="form-control title-btn"
							placeholder="{:lang('请输入内容')}"
							prefix-icon="el-icon-search"
							v-model="search"
							@keyup.enter="searchTree"
					/>
					<a class="btn btn-sm mr5 btn-primary title-btn" type="success" @click="searchTree" >{:lang('搜索')}</a>
				</div>
			</div>
			<!-- 新分类 -->
			<div>
				<el-table
						:data="tableData"
						border
						style="width: 100%;margin-bottom: 20px;"
						:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
						v-loading="loading"
						:row-key="getRowKeys"
						ref="topicTable"
						@row-click="clickRowHandle"
				>
					<el-table-column prop="name" label="{:lang('分类名称')}" >
						<template slot-scope="scope">
							<input
									type="text"
									v-model="scope.row.name"
									class="classfiy-name"
									@change="blurSave(scope.row,1)"
									@blur="blurChange(scope.row,1)"

							/>
						</template>
					</el-table-column>
					<el-table-column prop="sort" label="{:lang('分类排序')}" sortable >
						<template slot-scope="scope">
							<input
									type="number"
									min="0"
									v-model="scope.row.sort"
									class="classfiy-sort"
									@change="blurSave(scope.row,2)"
									@blur="blurChange(scope.row,2)"
									:ref="'sortDom'+ scope.row.id"
							/>
						</template>
					</el-table-column>
					<el-table-column label="{:lang('分类图片')}">
						<template slot-scope="scope">
							<el-upload
									class="avatar-uploader"
									action="/api/v1/5d5fa8984f0c2"
									:show-file-list="false"
									:on-success="handleAvatarSuccess">
								<img @click="upPic(scope.row)" v-if="scope.row.thumb != ''" class="clssfiy-pic" :src="scope.row.thumb_img"/>
								<span @click="upPic(scope.row)" v-if="scope.row.thumb == ''" class="up-pic">{:lang('上传')}</span>
							</el-upload>
						</template>
					</el-table-column>

					<el-table-column label="{:lang('是否推荐')}">
						<template slot-scope="scope">
							<!-- <span @click="isHot(scope.row)">{{scope.row.is_hot == 0 ? "不推荐" : "推荐" }}</span> -->
							<el-switch v-model="scope.row.is_hot" :active-value="1" :inactive-value="0" @change="isHot(scope.row)" ></el-switch>
						</template>
					</el-table-column>
				
					<!-- <el-table-column label="商家结算比率">
						<template slot-scope="scope">
							<input type="text"
								   v-model="scope.row.merchant_ratio"
								   class="classfiy-sort"
								   @change="blurSave(scope.row)"
							/>
						</template>
					</el-table-column> -->

					<el-table-column prop="create_time" label="{:lang('创建时间')}">
						<template slot-scope="scope">
							<span>{{ scope.row.create_time | transitionTime }}</span>
						</template>
					</el-table-column>
					<el-table-column label="{:lang('状态')}">
						<template slot-scope="scope">
							<span class="label-warning label" v-if='scope.row.status == 0'>{:lang('禁用')}</span>
							<span class="label-success label" v-else>{:lang('启用')}</span>
						</template>
					</el-table-column>
					<el-table-column label="{:lang('操作')}" width="300px">
						<template slot-scope="scope">
							<span class="btn btn-xs mr5 btn-default" @click="lookGoods(scope.row)">
								<i class="fa fa-pencil pr5"></i>
								{:lang('查看商品')}
							</span>

							<span class="btn btn-xs mr5 btn-default" @click="add(scope.row)" v-if="scope.row.level<=2">
								{:lang('新增子类')}
							</span>

							<span class="btn btn-xs mr5 btn-default" @click="isUse(scope.row,0)" v-if='scope.row.status==1'>
								<i class="fa fa-times pr5"></i>
								{:lang('禁用')}
							</span>
							<span class="btn btn-xs mr5 btn-default" @click="isUse(scope.row,1)" v-else>
								<i class="fa fa-check pr5"></i>
								{:lang('启用')}
							</span>
							<span class="btn btn-xs mr5 btn-default" @click="del(scope.row)">
								<i class="fa fa-times pr5"></i>
								{:lang('删除')}
							</span>
						</template>
					</el-table-column>
				</el-table>
			</div>

		</div>
	</div>
</div>
<div id="icon_tab" style="display:none">
	<div class="tab-content" style="padding: 10px">
		<div class="tab-pane fade active in" id="fa"> {include file="../application/admin/view/menu/icon_view.html" /}
		</div>
		{volist name="_icons" id="icon"}
		<div class="tab-pane fade" id="icon{$icon.id}"> {$icon.html|default='暂无图标'} </div>
		{/volist}
	</div>
</div>
{/block}

{block name="script"}
<script src="__PLUG__/jquery-nestable/jquery.nestable.js"></script>
<script src="__PLUG__/vue/vue.min.js"></script>
<script src="__PLUG__/vue/vue-resource.min.js"></script>
<!-- 引入饿了么js -->
<script src="/static/plugins/element-ui/element-ui.js"></script>
<script>

	const classfiy = new Vue({
		el: '#classfiy',
		data: {
			tableData: [], // 展示的数据
			tableDataEctype: [], // 请求回来的数据
			openRow: [], // 树形展开
			fileList: [], // 文件上传的列表
			temp:'', // 临时保存当前选择的行，不可删除
			isShow:false, // 利用此值限制用户添加子类行为，用以优化性能
			search:'', // 搜索框内容
			loading:false,//数据加载
		},
		created() { this.getData() },
		methods: {
			sortFocus() {
			    this.$refs.sortDom.focus()
			},
			// 获得数据
			getData() {
				this.loading = true;
				const that = this
				$.post("{:url('/goods/category/getcate')}", function(res) {
					if(res.code == 1) {
						//console.log('xxxxxxxx',res)
						that.tableData = that.deepCopy(res.data)
					}
					that.loading = false;
				})
			},
			// 是否推荐
			isHot (data) {
				$.post("{:url('goods/category/save_hot')}",{ "id":data.id ,"is_hot":data.is_hot })
						.then(res => {
					layer.msg("{:lang('保存成功')}")
			})
			},
			// 提交本次所作出的更改
			toSubmit() {
				setTimeout(() => {
					layer.msg("{:lang('保存成功')}")
			},500)
				// const that = this
				// const params = { "data" : that.tableData }
				// $.post("{:url('goods/category/savecate')}", params,function(res) {
				// 	console.log('xxxxx',res)
				// })
			},
			// 查看商品
			lookGoods(val) {
				console.log('lookGoods')
				window.location.href=`/admin.php/goods/index/index.html?cid=${val.id}`
			}, 

			
			// 新增子类,循环当前tableData，对比分类的id值，一致则在当前tableData下的children里push进newList。没有就创建一个children
			add(val) {
				let that = this
				if(this.isShow) {
					layer.msg("{:lang('请先保存当前更改之后再新增子类')}")
					return
				}
				const nowTime = new Date();
				// const yyy = nowTime.getFullYear();
				// const mmm = nowTime.getMonth() + 1;
				// const ddd = nowTime.getDate();
				let newList = {
					create_time:nowTime / 1000,
					level:val.level+1,
					id: '',
					is_hot:0,
					is_show:'',
					mobile_name:'',
					name:'',
					pid:val.id,
					sort: 0,
					status:1,
					thumb:'',
					typeid:'',
					merchant_ratio: 50,
				}
				console.log('新增子类',val)
				

				if(!val.children){
					this.$set(val,"children",[])
				}
				this.$nextTick(_ => {
					val.children.unshift(newList)
					
				});
				setTimeout(() => {
					this.openNowTree(val)
					this.isShow = true
				},100)
				console.log('tableData',this.tableData)
	
				// for(let i = 0; i < this.tableData.length; i++) {
				// 	if(this.tableData[i].id == val.id) {
				// 		if(this.tableData[i].children) {
				// 			console.log('1111找到了')
				// 			this.tableData[i].children.unshift(newList)
				// 			this.openNowTree(val)
				// 			this.isShow = true
				// 			return
				// 		} else {
				// 			console.log('2222找到了')
				// 			this.$set(this.tableData[i],"children",[])
				// 			this.tableData[i].children.unshift(newList)
				// 			setTimeout(() => {
				// 				this.openNowTree(val)
				// 			this.isShow = true
				// 			return
				// 		},100)
				// 		}
				// 	}
				// 	if(this.tableData[i].children) {
				// 		for(let j = 0; j < this.tableData[i].children.length; j++) {
				// 			if(this.tableData[i].children[j].id == val.id) {
				// 				if(this.tableData[i].children[j].children) {
				// 					console.log('333333找到了')
				// 					this.tableData[i].children[j].children.unshift(newList)
				// 					this.openNowTree(val)
				// 					this.isShow = true
				// 					return
				// 				} else {
				// 					console.log('44444找到了')
				// 					Vue.set(this.tableData[i].children[j],"children",[])
				// 					this.tableData[i].children[j].children.unshift(newList)
				// 					setTimeout(() => {
				// 						this.openNowTree(val)
				// 					this.isShow = true
				// 					return
				// 				},100)
				// 				}
				// 			}
				// 		}
				// 	}
				// }

			},
			// 是否启用
			isUse(val,status){
				// 1 启用 0 禁用
				$.post("{:url('goods/category/category_status')}", {id:val.id,status:status},(res) => {
							if(res.code == 1) {
							this.getData()
							layer.msg("{:lang('操作成功')}")
							return
						} else if (res.code == 0) {
							layer.msg(res.msg)
							return
						}
					})
			},
			// 删除
			del(val) {
				this.$confirm('确认删除吗？', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		          // this.$message({
		          //   type: 'success',
		          //   message: '删除成功!'
		          // });

				  $.post("{:url('goods/category/del')}", {"data":val},(res) => {
							if(res.code == 1) {
							this.getData()
							this.isShow = false
							layer.msg("{:lang('删除成功')}")
							return
						} else if (res.code == 0) {
							layer.msg(res.msg)
							return
						}
					})


		        //   for(let i = 0; i < this.tableData.length; i++) {
				// 	if(this.tableData[i].id == val.id) {
				// 		if(val.name == '') {
				// 			this.tableData.splice(i,1)
				// 			this.isShow = false
				// 			layer.msg('删除成功')
				// 			return
				// 		} else {
				// 			$.post("{:url('goods/category/del')}", {"data":val},(res) => {
				// 				if(res.code == 1) {
				// 				this.tableData.splice(i,1)
				// 				this.isShow = false
				// 				layer.msg('删除成功')
				// 				return
				// 			} else if (res.code == 0) {
				// 				layer.msg(res.msg)
				// 				return
				// 			}
				// 		})
				// 		}

				// 	}
				// 	if(this.tableData[i].children) {
				// 		for(let j = 0; j < this.tableData[i].children.length; j++) {
				// 			if(this.tableData[i].children[j].id == val.id) {
				// 				if(val.name == '') {
				// 					this.tableData[i].children.splice(j,1)
				// 					this.isShow = false
				// 					layer.msg('删除成功')
				// 					return
				// 				} else {
				// 					$.post("{:url('goods/category/del')}", {"data":val},(res) => {
				// 						if(res.code == 1) {
				// 						this.tableData[i].children.splice(j,1)
				// 						this.isShow = false
				// 						layer.msg('删除成功')
				// 						return
				// 					} else if (res.code == 0) {
				// 						layer.msg(res.msg)
				// 						return
				// 					}
				// 				})
				// 				}

				// 			}
				// 			if(this.tableData[i].children[j].children) {
				// 				for(let k = 0; k < this.tableData[i].children[j].children.length; k++) {
				// 					if(this.tableData[i].children[j].children[k].id == val.id) {
				// 						if(val.name == '') {
				// 							this.tableData[i].children[j].children.splice(k,1)
				// 							this.isShow = false
				// 							layer.msg('删除成功')
				// 							return
				// 						} else {
				// 							$.post("{:url('goods/category/del')}", {"data":val},(res) => {
				// 								if(res.code ==1) {
				// 								this.tableData[i].children[j].children.splice(k,1)
				// 								this.isShow = false
				// 								layer.msg('删除成功')
				// 								return
				// 							}  else if (res.code == 0) {
				// 								layer.msg(res.msg)
				// 								return
				// 							}
				// 						})
				// 						}

				// 					}
				// 				}
				// 			}
				// 		}
				// 	}
				// }
		        }).catch(() => {
		          // this.$message({
		          //   type: 'info',
		          //   message: '已取消删除'
		          // });          
		        });
				
			},
			// 新增商品分类
			addClassfiy() {
				if(this.isShow) {
					layer.msg("{:lang('请先保存当前更改之后再新增子类')}")
					return
				}
				const nowTime = new Date();
				let newList = {
					level:1,
					create_time:nowTime / 1000,
					id: '',
					is_hot:0,
					is_show:'',
					mobile_name:'',
					name:'',
					pid:'',
					sort: 0,
					status:'',
					thumb:'',
					typeid:'',
				}
				this.tableData.unshift(newList)
				this.$forceUpdate()
				this.isShow = true
			},
			// 展开当前树形数据
			openNowTree(row) {
				console.warn('展开成功',row)
				this.$refs.topicTable.toggleRowExpansion(row,true)
			},
			// 关闭当前树形数据
			closeNowTree(row) {
				this.$refs.topicTable.toggleRowExpansion(row,false)
			},
			// 点击行
			clickRowHandle(row) {
				// console.log(row)
			},
			// 获得row-id
			getRowKeys(row) {
				return row.id
			},
			// 获取当前上传图片的行数据
			upPic(val) {
				this.temp = val
				// for(let i = 0; i < this.tableData.length; i++) {
				// 	if(this.tableData[i].id == val.id) {
				// 		this.temp = this.tableData[i]
				// 		return
				// 	}
				// 	if(this.tableData[i].children) {
				// 		for(let j = 0; j < this.tableData[i].children.length; j++) {
				// 			if(this.tableData[i].children[j].id == val.id) {
				// 				this.temp = this.tableData[i].children[j]
				// 				return
				// 			}
				// 			if(this.tableData[i].children[j].children) {
				// 				for(let k = 0; k < this.tableData[i].children[j].children.length; k++) {
				// 					if(this.tableData[i].children[j].children[k].id == val.id) {
				// 						this.temp = this.tableData[i].children[j].children[k]
				// 						return
				// 					}
				// 				}
				// 			}
				// 		}
				// 	}
				// }
				console.log('保存当前行数据',this.temp)
			},
			 // 上传图片并预览
			handleAvatarSuccess(res, file) {
			const data = {
				"id" : res.data[0].id,
				"path" : res.data[0].path
			}
				console.log('上传成功',res)
				this.$set(this.temp,"thumb",data.id)
				this.$set(this.temp,"thumb_img",data.path)
				this.blurSave(this.temp)
			},

			// 深拷贝方法
			deepCopy(obj) {
				let result;
				//引用类型分数组和对象分别递归
				if (Object.prototype.toString.call(obj) == '[object Array]') {
					result = []
					for (let i = 0; i < obj.length; i++) {
						result[i] = this.deepCopy(obj[i])
					}
				} else if (Object.prototype.toString.call(obj) == '[object Object]') {
					result = {}
					for (let attr in obj) {
						result[attr] = this.deepCopy(obj[attr])
					}
				} else {
					return obj
				}
				return result
			},
		
			// 搜索
			searchTree() {
				this.loading = true;
				$.post("{:url('/goods/category/getcate')}", {"keyword":this.search},(res) => {
					if(res.code == 1) {
					this.tableData = this.deepCopy(res.data)
					this.loading = false;
				}
			})
			},
			blurChange(val,type){
				if(!val.name.trim()){
					layer.msg("{:lang('请输入分类名称')}")
					return
				}
				// this.$refs.sortDom.focus()
				if(val.sort < 0 ){
					layer.msg("{:lang('分类排序不能小于0')}")
					return
				}
			},
			// 失焦保存
			blurSave(val,type) {
				console.log('519',val,type)
				let that = this

				if(!val.name.trim()){
					layer.msg("{:lang('请输入分类名称')}")
					return
				}
				if(type == 1){
					let ref = 'sortDom'+ val.id;
					// console.log(ref);
					this.$refs[ref].focus()
				}
				if(val.sort < 0 ){
					layer.msg("{:lang('分类排序不能小于0')}")
					return
				}

				$.post("{:url('goods/category/savecate')}", {"data":val},(res) => {
					if (res.code == 1) {
						that.$set(val,'id',res.data.id)
						that.isShow = false
						layer.msg("{:lang('保存成功')}")
					} else {
							layer.msg(res.msg)
					}
			    })
							

				// for(let i = 0; i < this.tableData.length; i++) {
				// 	if(this.tableData[i].id == val.id) {
				// 		if(val.name.trim() == '') {
				// 			return
				// 		} else {
				// 			$.post("{:url('goods/category/savecate')}", {"data":val},(res) => {
				// 				// 此处应加上if(res==1)
				// 				if (res.code == 1) {
				// 				this.$set(this.tableData[i],'id',res.data.id)
				// 				this.isShow = false
				// 				layer.msg('保存成功')
				// 				return
				// 			} else {
				// 				layer.msg(res.msg)
				// 			}
				// 		})
				// 		}
				// 	}
				// 	if(this.tableData[i].children) {
				// 		for(let j = 0; j < this.tableData[i].children.length; j++) {
				// 			if(this.tableData[i].children[j].id == val.id) {
				// 				if(val.name.trim() == '') {
				// 					return
				// 				} else {
				// 					$.post("{:url('goods/category/savecate')}", {"data":val},(res) => {
				// 						if (res.code == 1) {
				// 						this.$set(this.tableData[i].children[j],'id',res.data.id)
				// 						this.isShow = false
				// 						layer.msg('保存成功')
				// 						return
				// 					} else {
				// 						layer.msg(res.msg)
				// 					}
				// 				})
				// 				}
				// 			}
				// 			if(this.tableData[i].children[j].children) {
				// 				for(let k = 0; k < this.tableData[i].children[j].children.length; k++) {
				// 					if(this.tableData[i].children[j].children[k].id == val.id) {
				// 						if(val.name.trim() == '') {
				// 							return
				// 						} else {
				// 							$.post("{:url('goods/category/savecate')}", {"data":val},(res) => {
				// 								if (res.code == 1) {
				// 								this.$set(this.tableData[i].children[j].children[k],'id',res.data.id)
				// 								this.isShow = false
				// 								layer.msg('保存成功')
				// 							} else {
				// 								layer.msg(res.msg)
				// 							}

				// 						})
				// 						}
				// 					}
				// 				}
				// 			}
				// 		}
				// 	}
				// }
			}
		},
		filters:{
			// 过滤时间戳
			transitionTime(val) {
				const date = new Date(val * 1000);
				const Y = date.getFullYear();
				const M = date.getMonth() + 1;
				const D = date.getDate();
				const hh = date.getHours();
				const mm = date.getMinutes();
				const ss = date.getSeconds();
				return `
					${Y}-${M.toString().length > 1 ? M : `0${M}`}-${D.toString().length > 1 ? D : `0${D}`} ${hh.toString().length > 1 ? hh : `0${hh}`}:${mm.toString().length > 1 ? mm : `0${mm}`}:${ss.toString().length > 1 ? ss : `0${ss}`}`
			},
		}
	})



</script>
{/block}